<template>
<div class="car-serve-card" @click='jump'>

    <i-row>

        <i-col :xs='7' :sm='6' :span='6'  >
            <div class="car-img">
                <div class="img-box">
                    <img :src="info.imgUrl" :alt="info.model">
                </div>
            </div>
        </i-col>
        
        <i-col :xs='17' :sm='18' :span='18' >

            <div class="info-content">

                <div class="info-main">

                    <div class="info-base">

                         <span class="text">
                            服务种类: {{type}}
                        </span>
                        
                        <span class="text">
                            名称: {{info.name}}
                        </span>
                        
                        <span class="text">
                            电话: {{info.phone}}
                        </span>
                        
                        <span class="text">
                            区域: {{info.region}}
                        </span>

                    </div>
                        
                    <div class="info-remind">

                        <i class="iconfont fackbook icon icon-facebook-fill"></i>
                        
                        <h1 class='goto'>
                            详情浏览
                        </h1>
                        
                    </div>
                    
                </div>

                <div class="info-sub">

                    <span class="text">
                        地区: {{info.address}}
                    </span>
                    
                    <span class="text">
                        网址:  {{info.web}}
                    </span>
                    
                </div>

            </div>
            
        </i-col>
        
    </i-row>
        
</div>
</template>

<script lang='ts'>
import {Component, Vue, Prop} from 'vue-property-decorator';

export interface ICarServCard{
    id: string,
    imgUrl: string,
    name: string,
    phone: string,
    region: string,
    address: string,
    web: string,
    tips: Array<string>
}


@Component
export default class Topbar extends Vue{

    @Prop()
    info?: ICarServCard

    get type (){
        let typeStr = '';

        if(this.info && this.info.tips){

            this.info.tips.forEach(item =>{

                typeStr = `${typeStr}, ${item}`    

            })
            
        }

        return typeStr;
    }
    
    jump(){

        if(!this.info){
            return;
        }
        let id:string = this.info.id;
        this.$router.push({
            path: '/car-serve-detaild',
            query: {id}
        })

    }
    
}


</script>

<style scoped lang='less'>

.car-serve-card{

    overflow: hidden;
    background: @bgColor;
    
    .radius-df();
    .car-img{
        height: 150*@rem;
    }
    
}

.text{
    .textOverFlow();
    display: block;
    margin-top: 10*@rem;
    color: @mainColor;
}

.info-content{
    padding-left: 10*@rem;
}

.info-main{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-base{
    flex: 1 1;
}

.info-remind{
    text-align: right; 

    .fackbook{
        font-size: 50*@rem;
        color: @mainColor;   
    }

    .goto{
        margin-top: 20*@rem;
        font-size: @fontSizeLg;
        font-weight: 600;
        color: @mainColor;
    }
}


.info-sub{
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}

/* 768 */
@media (max-width: 768px){

 .car-serve-card{
    padding-bottom: 0;

    .car-img{
        height: 150*@rem;
    }
    
   .info-content{
     padding-bottom: 10*@rem;
   }
    
 }
 
}


/* 620px */
@media (max-width: 620px){

 .car-serve-card{

    .car-img{
        height: 160*@rem;
    }
   
   .info-main{
        display: flex;
   }

   .info-remind{
        text-align: right;

        .fackbook{
            font-size: 40*@rem;
        }

        .goto{
            margin-top: 20*@rem;
            font-size: 14*@rem;
        }
    
    }

    .info-sub{
        display: block;
      
    }
   
 }
 
}


</style>